<template>
	<view>
		<view class="details">
			<view class="detailsTop">
				<view class="">订单号：{{ arry.order_no }}</view>
				<view class=""><image :src="fan()" mode=""></image></view>
			</view>
			<view class="detailsBot">
				<view class="left">
					<view class="photo">{{ arry.supplier_name.charAt(0) }}</view>
					<view class="boxt">
						<view class="boxTop">{{ arry.supplier_name }}</view>
						<view class="boxbot">应收欠款:￥{{ arry.order_sum }}</view>
					</view>
				</view>
				<view class="payBtn f30 cfff tCenter" @click="gopay(arry.supplier_id)">去付款</view>
			</view>
		</view>

		<view class="singlePerson">
			<view class="singlePersonTop">
				<view class="left">开单人：{{ arry.user_name }}</view>
				<view class="right">{{ arry.create_time | birtime }}</view>
			</view>
			<view class="singlePersonBot">
				订单金额：¥{{ arry.payable }}
				<!-- <text>以优惠88.0元)</text> -->
			</view>
		</view>
		<!-- 		<view class="shop">
			<view class="shopTop">
				<view class="">
					总采购数：10（
					<text>总欠货: 22</text>
					)
				</view>
				 <view class="">
					<text class="blue">统一展开</text>
					<image src="../../static/images/arrow_down.png" mode=""></image>
				</view>
			</view>
		</view> -->
		<!-- 商品 -->
		<view class="" v-for="(item, index) in goodList" :key="index">
			<view class="">
				<view class="shopCenter">
					<image :src="item.cover" mode=""></image>
					<view class="bot">
						<view class="botTop">
							<view class="botLeft">{{ item.title }}</view>
							<!-- <view class="botRight hui">未入库:2</view> -->
						</view>
						<view class="botTop" style="margin-top: 53rpx;">
							<view class="botLeft">
								总要货数：{{ allowe_num(item) }}（
								<text>¥{{ allMoney(item) }}</text>
								)
							</view>
							<view class="botRight blue" @click="ShowBox(index)">
								{{ item.show == true ? '收起' : '展开' }}
								<image :src="zhanImage" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="box" v-show="item.show">
					<view class="boxTop">
						<view class="boxLeft">规格</view>
						<view class="boxCenter">采购数(价格)</view>
						<view class="boxRight">退欠货数</view>
					</view>
					<view class="boxbot" v-for="(child,index) in item.product_list" :key="index">
						<view class="boxLeft">{{ child.spec_data[0] + '/' + child.spec_data[1] }}</view>
						<view class="boxCenter">{{ child.operate_num }}(¥{{ child.sell_price }})</view>
						<view class="boxRight">{{ child.owe_num }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="remark">
			<view class="">备注</view>
			<input type="text" value="" placeholder="某某备注" />
		</view>

		<view style="height: 120rpx;"></view>
		<view class="bott" v-if="showRu">
			<view class="botOne" @click="goSearch">
				<image src="../../static/client/0001.png" mode=""></image>
				去入库
			</view>
			<view class="botOne" @click="close()">
				<image src="../../static/client/0003.png" mode=""></image>
				关闭订单
			</view>
			<view class="botOne" @click="goReturn">
				<image src="../../static/client/0002.png" mode=""></image>
				退货
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			arry: '',
			allUser: '',
			Showbox: false,
			showZhan: '展开',
			zhanImage: '../../static/slice/1.png',
			showRu: false,
			customer_id: '',
			useAddindex: '',
			att: '0',
			add: [],
			goodList: {},
			supplierId:'',
			orderId: ''
		};
	},
	onLoad(option) {
		this.supplierId=option.supplierId
		this.orderId = option.orderId;
	},
	onShow() {
		this.useAddindex = uni.getStorageSync('useAddindex');
		this.qian();
		this.getOrderInfo();
	},
	methods: {
		//采购详情
		getOrderInfo() {
			let that = this;
			that.$ajax('api/v1.supplier/orderInfo', {
				order_id: that.orderId
			})
				.then(res => {
					if ((res.code = 1)) {
						that.arry = res.result;
						that.goodList = res.result.goods_list;
						if (this.arry.order_type == 1) {
							this.showRu = true;
						}
					}
				})
				.catch(res => {
					that.$sToast(res.message);
				});
		},
		goReturn(){
			uni.setStorageSync('name',this.arry.supplier_name )
			uni.navigateTo({
				url:'./supplierReturns'
			})
		},
		ShowBox(index) {
			this.goodList[index].show = !this.goodList[index].show;
			this.$set(this.goodList, index, this.goodList[index]);
		},
		fan(item) {
			if (this.arry.order_type == 1) {
				return '../../static/images/icon_staple.png';
			}
			if (this.arry.order_type == 2) {
				return '../../static/client/tui.png';
			}
			if (this.arry.order_type == 3) {
				return '../../static/slice/gai.png';
			}
		},
		goSearch() {
			if(this.arry.is_close==1){
				this.$sToast('订单已关闭')
			}else{
				uni.navigateTo({
					url: './supplierProcurement?orderId='+ this.orderId + '&supplierId='+this.supplierId
				});
			}
		},
		addre() {
			if (this.arry.order_type == 1) {
				uni.navigateTo({
					url: 'useAdd'
				});
				uni.setStorage({
					key: 'uat',
					data: this.ate
				});
			}
			if (this.arry.order_type == 2) {
				uni.showToast({
					title: '非销售单不能修改',
					icon: 'none',
					duration: 1500
				});
			}
			if (this.arry.order_type == 3) {
				uni.showToast({
					title: '非销售单不能修改',
					icon: 'none',
					duration: 1500
				});
			}
		},

		allMoney(item) {
			// console.log(item);
			let c = 0;
			item.product_list.forEach(item => {
				c = item.operate_num * item.sell_price + c;
			});
			return c;
		},

		gopay(id) {
			uni.navigateTo({
				url: './supplierpayment?id=' + id 
			});
		},
		qian() {
			this.$ajax('api/v1.customer/index', {})
				.then(res => {
					// console.log(res);
					this.allUser = res.result;
					// console.log(this.allUser);
					this.allUser.forEach((item, i) => {
						if (item.customer_id == this.customer_id) {
							// console.log(i);
							this.ate = this.allUser[i];
						}
					});
					// console.log(this.ate);
				})
				.catch(res => {
					console.log(Error);
				});
		},
		allowe_num(item) {
			// console.log(item);
			let c = 0;

			item.product_list.forEach(item => {
				this.total = c = item.owe_num + c;
			});
			return c;
		},
		//关闭订单
		close() {
			let that=this;
			that.$ajax('api/v1.supplier/orderClose', {
				order_id: that.orderId
			}).then(res => {
				if(res.code==1){
					that.$sToast('关闭成功')
					setTimeout(function(){
						uni.navigateBack({
							delta:1
						})
					},2000)
				}
				})
				.catch(res => {
					that.$sToast(res.message)
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.head {
	height: 88rpx;
	line-height: 88rpx;
	background-color: #249af6;
	color: #ffffff;
	display: flex;
	justify-content: space-between;
	padding: 0 30rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
	image {
		width: 22rpx;
		height: 39rpx;
		margin-top: 25rpx;
	}
}
.details {
	// height: 269rpx;
	margin-top: 20rpx;
	background-color: #ffffff;
	padding: 0 32rpx;

	.detailsTop {
		height: 103rpx;
		line-height: 103rpx;
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		border-bottom: 2rpx #eeeeee solid;
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
	.detailsBot {
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		.left {
			display: flex;
			flex-direction: row;
		}
		.photo {
			width: 100rpx;
			height: 100rpx;
			overflow: hidden;
			border-radius: 50%;
			background-color: #249af6;
			color: #ffffff;
			text-align: center;
			line-height: 100rpx;
		}
		.boxt {
			margin-left: 34rpx;
			.boxTop {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
			}
			.boxbot {
				margin-top: 37rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(102, 102, 102, 1);
			}
		}
	}
	button {
		width: 116rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		position: relative;
		left: 50rpx;
	}
}
.address {
	height: 110rpx;
	line-height: 110rpx;
	display: flex;
	justify-content: space-between;
	padding: 0 30rpx;
	box-sizing: border-box;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	background-color: #ffffff;
	margin-top: 20rpx;
	image {
		margin-top: 38rpx;
		width: 18rpx;
		height: 33rpx;
	}
}
.singlePerson {
	margin-top: 20rpx;
	padding: 38rpx 29rpx;
	background-color: #ffffff;
	box-sizing: border-box;
	font-size: 30rpx;
	color: rgba(51, 51, 51, 1);
	font-family: PingFang SC;
	font-weight: 500;
	.singlePersonTop {
		display: flex;
		justify-content: space-between;
		.right {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
		}
	}
	.singlePersonBot {
		margin-top: 30rpx;
	}
}
text {
	color: #f64444;
}
.blue {
	color: #249af6;
}
.hui {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
}
.shop {
	padding-left: 29rpx;
	padding-right: 29rpx;
	margin-top: 20rpx;
	background-color: #ffffff;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	.shopTop {
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #cccccc;
		image {
			width: 17rpx;
			height: 10rpx;
			margin-left: 10rpx;
		}
	}
}
.shopCenter {
	margin-top: 20rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	height: 211rpx;
	background-color: #ffffff;
	padding: 40rpx 34rpx;
	box-sizing: border-box;
	display: flex;
	image {
		width: 130rpx;
		height: 130rpx;
	}
	.bot {
		flex: 1;
		margin-left: 27rpx;
		.botTop {
			display: flex;
			justify-content: space-between;
			image {
				width: 17rpx;
				height: 10rpx;
				margin-left: 10rpx;
			}
		}
	}
}
.box {
	.boxTop {
		height: 100rpx;
		line-height: 100rpx;
		background-color: #eeeeee;
		display: flex;
		justify-content: space-evenly;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		border-bottom: 2rpx solid #cccccc;
	}
	.boxbot {
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		background-color: #eeeeee;
		color: #666666;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		justify-content: space-evenly;

		/* 	.boxCenter {
			position: relative;
			left: 30rpx;
		} */
	}
}
.remark {
	height: 110rpx;
	padding: 40rpx 29rpx;
	box-sizing: border-box;
	background-color: #ffffff;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	display: flex;
	margin-top: 20rpx;
	input {
		height: 100%;
		flex: 1;
		margin-left: 40rpx;
	}
}
.bott {
	width: 100%;
	height: 110rpx;
	line-height: 110rpx;
	position: fixed;
	bottom: 0;
	background-color: #ffffff;
	padding: 0 33rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	image {
		width: 44rpx;
		height: 44rpx;
		vertical-align: middle;
		margin-right: 20rpx;
	}
}
.payBtn {
	width: 105rpx;
	height: 55rpx;
	line-height: 55rpx;
	background: rgba(36, 154, 246, 1);
	border-radius: 5rpx;
}
</style>
